<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>评论界面</title>

    <link rel="stylesheet" href="../css/discuss.css" media="screen" type="text/css">
    <!--bootstrap-->
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7/dist/css/bootstrap.min.css">
    <!--滚动条-->
    <link rel="stylesheet" href="../lib/css/scrollBar.css">
    <!--消息提示组件 CSS-->
    <link rel="stylesheet" href="../lib/spop-gh-pages/dist/spop.css">
    <!--分页-->
    <link rel="stylesheet" href="../lib/css/jquery.pagination.css">
    <!--字体图标库-->
    <link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <!--左下角导航栏 CSS-->
    <link rel="stylesheet" type="text/css" href="../lib/css/nav.css">
</head>

<!--<body onload="run();">-->
<body>
<!--整体布局放在雨滴背景上-->
<div style="position: relative;z-index: 9999">

    <!--左下角导航栏 返回-->
    <div class="leftNav-item">
        <ul>
            <li>
                <i class="fa fa-reply-all"></i>
                <a href="javascript:history.back(-1)" class="rota">返回</a>
            </li>
        </ul>
    </div>

    <!--吐槽内容或鸡汤内容展示-->
    <div class="tucao-content">
        <div class="tucao">
            <!--头像-->
            <div class="picture">
                <img class="circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="author">
                <div class="name">
                    <span id="username"></span>
                </div>
                <div class="time">
                    <span id="time"></span>&nbsp;&nbsp;<span id="place"></span>
                </div>
            </div>
            <!--吐槽内容-->
            <div class="content">
                <div class="tucaoMainContent" id="content">

                </div>
            </div>
        </div>
    </div>

    <!--评论列表 字体-->
    <div class="discuss-word">
        <span style="color: #000;">评论列表</span>
    </div>
    <!--评论列表 分页框-->
    <div class="discuss-page">
        <ul class="pagination">
            <li>
                <select id="discussPageSelect">

                </select>
                页
            </li>
        </ul>
    </div>
    <!--具体评论-->
    <div class="discuss-list">
        <!--第一条评论-->
        <div id="discuss1" class="discuss-one">
            <!--头像-->
            <div style="float: left">
                <img class="discuss-circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="discuss-author">
                <span id="discussUsername1" class="discuss-name"></span>&nbsp;&nbsp;
                <div style="margin-top: 10px;float: right">
                    <span id="discussTime1" class="discuss-time"></span>&nbsp;&nbsp;
                    <span id="discussPlace1" class="discuss-time"></span>
                </div>
            </div>
            <!--评论内容-->
            <div class="discuss-content">
                <span id="discussId1" hidden></span>
                <div id="discussContent1" class="discuss-content-detail">

                </div>
            </div>
        </div>
        <!--第二条评论-->
        <div id="discuss2" class="discuss">
            <!--头像-->
            <div style="float: left">
                <img class="discuss-circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="discuss-author">
                <span id="discussUsername2" class="discuss-name"></span>&nbsp;&nbsp;
                <div style="margin-top: 10px;float: right">
                    <span id="discussTime2" class="discuss-time"></span>&nbsp;&nbsp;
                    <span id="discussPlace2" class="discuss-time"></span>
                </div>
            </div>
            <!--评论内容-->
            <div class="discuss-content">
                <span id="discussId2" hidden></span>
                <div id="discussContent2" class="discuss-content-detail">

                </div>
            </div>
        </div>
        <!--第三条评论-->
        <div id="discuss3" class="discuss">
            <!--头像-->
            <div style="float: left">
                <img class="discuss-circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="discuss-author">
                <span id="discussUsername3" class="discuss-name"></span>&nbsp;&nbsp;
                <div style="margin-top: 10px;float: right">
                    <span id="discussTime3" class="discuss-time"></span>&nbsp;&nbsp;
                    <span id="discussPlace3" class="discuss-time"></span>
                </div>
            </div>
            <!--评论内容-->
            <div class="discuss-content">
                <span id="discussId3" hidden></span>
                <div id="discussContent3" class="discuss-content-detail">

                </div>
            </div>
        </div>
        <!--第四条评论-->
        <div id="discuss4" class="discuss">
            <!--头像-->
            <div style="float: left">
                <img class="discuss-circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="discuss-author">
                <span id="discussUsername4" class="discuss-name"></span>&nbsp;&nbsp;
                <div style="margin-top: 10px;float: right">
                    <span id="discussTime4" class="discuss-time"></span>&nbsp;&nbsp;
                    <span id="discussPlace4" class="discuss-time"></span>
                </div>
            </div>
            <!--评论内容-->
            <div class="discuss-content">
                <span id="discussId4" hidden></span>
                <div id="discussContent4" class="discuss-content-detail">

                </div>
            </div>
        </div>
        <!--第五条评论-->
        <div id="discuss5" class="discuss">
            <!--头像-->
            <div style="float: left">
                <img class="discuss-circleImg" src="../img/user.jpg">
            </div>
            <!--用户名、时间、地点信息-->
            <div class="discuss-author">
                <span id="discussUsername5" class="discuss-name"></span>&nbsp;&nbsp;
                <div style="margin-top: 10px;float: right">
                    <span id="discussTime5" class="discuss-time"></span>&nbsp;&nbsp;
                    <span id="discussPlace5" class="discuss-time"></span>
                </div>
            </div>
            <!--评论内容-->
            <div class="discuss-content">
                <span id="discussId5" hidden></span>
                <div id="discussContent5" class="discuss-content-detail">

                </div>
            </div>
        </div>
    </div>

    <!--发表评论 字体-->
    <div class="add-discuss-word">
        <span style="color: #000;">发表评论</span>
    </div>
    <!--发表评论-->
    <div class="addDiscuss">
        <div class="commit-body">
            <div class="form-group">
                <div class="form-group" style="margin: 0">
                    <textarea id="addDiscussContent" class="form-control"
                              style="resize: vertical;margin-top: 10px;height: 200px;border-radius: 10px"
                              placeholder="文明用语~最多可输入100字" maxlength="100"></textarea>
                </div>
                <br>
                <div class="form-group" style="margin:0">
                    <button id="addDiscussBtn" class="btn btn-primary btn-block" type="submit"
                            style="width: 100px;height:30px;font-size: 15px;margin: 0;position: fixed;left: 1280px;bottom: 10px;z-index: 10000">
                        发布
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!--背景 下雨特效-->
<img id="background" alt="background" src="" style="height: 100%;width: 100%"/>

<!--导入JS-->
<!--jquery 1.11.0-->
<script src="../lib/js/jquery-1.11.0.min.js"></script>
<!--Bootstrap-->
<script src="../lib/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<!--滚动条-->
<script src="../lib/js/scrollBar.js"></script>
<!--雨玻璃背景-->
<script src="../lib/js/rainyday.min.js"></script>
<!--定位当前城市-->
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<!--消息提示组件-->
<script src="../lib/spop-gh-pages/dist/spop.js"></script>
<!--分页-->
<script src="../lib/js/jquery.pagination.min.js"></script>
<!--导入JS-->
<script src="../js/discuss.js"></script>
</body>

</html>
